<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.global.js"></script>
    <script src="./node_modules/axios/dist/axios.min.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #ecedf2;
            overflow: scroll;
        }

        .container {
            width: 1110px;
            margin: 20px auto;
        }

        .header {
            display: flex;
            width: 100%;
            height: 100px;
        }

        .header .title {
            width: 80px;
            height: 100px;
            background-color: rgb(84, 136, 213);
            border-radius: 10px 0 0 10px;
        }

        .header .title div {
            height: 50px;
            color: #fff;
            line-height: 50px;
            text-align: center;
        }

        .container .search .search-type {
            display: flex;
            /* gap: 20px;  */
            align-items: center;
            width: 1030px;
            height: 50px;
            line-height: 50px;
            color: #666;
            background-color: #fff;
        }

        .bors {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-left: 30px;
            cursor: pointer;
        }

        .search-type .bor {
            position: relative;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid #999;
        }

        .search-type .bor div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 12px;
            height: 12px;
            background-color: white;
            border-radius: 50%;
        }

        .search-type .bor.state {
            border: 1px solid rgb(84, 136, 213);
        }

        .search-type .bor.state div {
            background-color: rgb(84, 136, 213);
        }

        .container .search .search-input {
            display: flex;
            margin-left: auto;
            align-items: center;
            margin-right: 30px;
            width: 300px;
            height: 35px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        .container .search .search-input input {
            width: 260px;
            height: 20px;
            padding: 0 10px;
            border: none;
            outline: none;
            /* 取消输入时默认的边框 */
            border-right: 2px solid #ccc;
        }

        .container .search .search-btn {
            margin: 0 auto;
            width: 20px;
            height: 20px;
            background-image: url(./img/搜索.png);
            background-size: 100%;
        }

        .items {
            display: flex;
            flex-wrap: wrap;
            gap: 20px 30px;
            margin: 30px 20px;
            text-align: center;
        }

        .item {
            width: 80px;
            height: 100px;
            /* text-align: center; */
            line-height: 16px;
            text-decoration: none;
            color: inherit;
        }

        .item img {
            width: 80px;
            height: 80px;
            border-radius: 15px 0px;
            border: 2px solid rgb(84, 136, 213);
        }

        .no-data {
            width: 1070px;
            font-size: 20px;
            color: #aaa;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <div class="title">
                <div>综合</div>
                <div>职业</div>
            </div>
            <div class="search">
                <div class="search-type">
                    <!-- 综合 -->
                    <template v-for="item in types1">
                        <div class="bors" @click="show(item.id)">
                            <div :class="state == item.id? 'bor state' : 'bor'">
                                <div></div>
                            </div>
                            <span>{{item.name}}</span>
                        </div>
                    </template>
                </div>
                <!-- 英雄职业 -->
                <div class="search-type">
                    <template v-for="item in types">
                        <div class="bors" @click="show(item.id)">
                            <div :class="state == item.id? 'bor state' : 'bor'">
                                <div></div>
                            </div>
                            <span>{{item.name}}</span>
                        </div>
                    </template>
                    <div class="search-input">
                        <input type="text" placeholder="请输入你想要搜索的英雄名" v-model="searchData">
                        <div class="search-btn"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="items">
            <template v-if="items.length>0? true : false">
                <a class="item" v-for="(item,index) in items" :key="index"
                    :href="`https://pvp.qq.com/web201605/herodetail/${item.ename}.shtml`">
                    <img :src="`https://game.gtimg.cn/images/yxzj/img201606/heroimg/${item.ename}/${item.ename}.jpg`"
                        alt="">
                    <p v-html="highlight(item.cname, searchData)"></p> <!--v-html指令用于渲染包含 HTML 标签的字符串 -->
                </a>
            </template>
            <template v-else>
                <p class='no-data'>暂无英雄数据</p>
            </template>
        </div>
    </div>

    <script>
        const { createApp } = Vue;
        let arr = []
        createApp({
            data() {
                return {
                    items: [],   //英雄列表
                    types: [{ id: 0, name: '全部' }, { id: 1, name: '战士' }, { id: 2, name: '法师' }, { id: 3, name: '坦克' }, { id: 4, name: '刺客' }, { id: 5, name: '射手' }, { id: 6, name: '辅助' }],
                    types1: [{ id: 10, name: '本周免费' }, { id: 11, name: '新手推荐' }],
                    type: 0,     //当前选中的类型
                    state: 0,     //当前选中的状态
                    searchData: ''   //搜索框数据
                }
            },
            async mounted() {
                const Arr = await axios.get("http://project.x-zd.net:3001/apis/herolist");
                this.items = Arr.data.data;
                arr = JSON.parse(JSON.stringify(Arr.data.data.reverse()));   //深拷贝数据，避免数据污染
            },
            methods: {
                show(type) {
                    this.state = type
                    this.items = arr.filter(e => {
                        return e.pay_type == type || e.hero_type == type || e.hero_type2 == type || type == 0
                    });
                    this.searchData = ''
                },
                highlight(text, keyword) {
                    if (!keyword) return text;
                    return text.replace(keyword, `<span style="color: red;">${keyword}</span>`);
                }
            },
            watch: {
                searchData() {
                    if (this.searchData == '') {
                        this.items = arr
                    } else {
                        this.items = arr.filter(e => {
                            return e.cname.includes(this.searchData)
                        });
                    }
                    this.state = 0
                }
            }
        }).mount('.container')
    </script>
</body>

</html>